{% extends "base_for_backbone.html" %}
{% load seahub_tags group_avatar_tags i18n %}
{% load staticfiles %}

{% block sub_title %}{% trans "Libraries" %} - {% endblock %}

{% block main_panel %}
<div id="initial-loading-view">
    <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
</div>
{% endblock %}

{% block left_panel %}
<div class="side-tabnav hide" id="myhome-side-nav">
</div>
<div class="side-tabnav hide" id="group-side-nav">
</div>
<div class="side-tabnav hide" id="org-side-nav">
    <h3 class="hd">{% trans "Organization" %}</h3>
    <ul class="side-tabnav-tabs">
        <li class="tab tab-cur"><a href="{{ SITE_ROOT }}#org/" class="lib">{% trans "Libraries" %}</a></li>
        <li class="tab"><a href="{% url 'pubuser' %}" class="members">{% trans "Members" %}</a></li>
    </ul>
</div>
{% endblock %}

{% block right_panel %}


<div id="repo-tabs" class="tab-tabs hide">
    <div class="hd">
        <ul class="tab-tabs-nav fleft">
            {% if user.permissions.can_add_repo %}
            <li class="tab"><a href="#my-libs/" class="a" id="mylib-tab">{% trans "Mine" %}</a></li>
            {% if sub_lib_enabled %}
            <li class="tab"><a href="#my-sub-libs/" class="a" id="sublib-tab">{% trans "Sub-libraries" %}</a></li>
            {% endif %}
            {% endif %}
            <li class="tab"><a href="#shared-libs/" class="a" id="shared-lib-tab">{% trans "Shared" %}</a></li>
        </ul>
        <div class="fright">
            {% if user.permissions.can_add_repo %}
            <button class="repo-create"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
            {% endif %}
            {% if sub_lib_enabled %}
            <button id="sub-lib-create" class="hide" title="{% trans "New Sub-library" %}"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Sub-library" %}</span></button>
            {% endif %}
        </div>
    </div>

    <div id="my-own-repos">
        <table class="hide">
            <thead></thead>
            <tbody></tbody>
        </table>
        <div class="empty-tips hide">
            <h2 class="alc">{% trans "You have not created any libraries" %}</h2>
            <p>{% trans "You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately." %}</p>
        </div>
    </div>

    <div id="my-sub-repos">
        <table class="hide">
            <thead>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="38%">{% trans "Name" %}</th>
                <th width="6%"><!--op--></th>
                <th width="30%">{% trans "Origin" %}</th>
                <th width="22%">{% trans "Last Update" %}</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <div class="empty-tips hide">
            <h2 class="center-contents">{% trans "You have not created any sub-libraries" %}</h2>
            <p>{% trans "You can create a sub-library from a directory inside a library. A sub-library can be independently synced and shared. Files in the sub-library will be automatically kept in sync with those in the directory of the origin library." %}</p>
        </div>
    </div>

    <div id="repos-shared-to-me">
        <table class="hide">
            <thead></thead>
            <tbody></tbody>
        </table>
        <div class="empty-tips hide">
            <h2 class="alc">{% trans "No library is shared to you" %}</h2>
        </div>
    </div>

    <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
    <p class="error error-tip hide"</p>
</div>

<div id="starred-file" class="hide">
    <h3 class="hd">{% trans "Starred" %}</h3>
    <table class="hide">
        <thead>
            <tr>
                <th width="5%"></th>
                <th width="40%">{% trans "File Name" %}</th>
                <th width="32%">{% trans "Library" %}</th>
                <th width="18%">{% trans "Last Update" %}</th>
                <th width="5%"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You don't have any starred files yet" %}</h2>
        <p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
    </div>
</div>

<div id="guide-for-new" class="hide">
    <span class="icon-lightbulb fleft"></span>
    <div class="txt">
        <h3>{% trans "Welcome to Seafile!" %}</h3>
        {% if user.permissions.can_add_repo %}
        <p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later." %}</p>
        {% else %}
        <p>{% trans "Seafile organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries." %}</p>
        {% endif %}
        <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
    </div>
</div>


{% if sub_lib_enabled %}
<form id="sublib-create-form" class="file-choose-form hide">
    <h3>{% trans "Choose a directory:" %}</h3>
    <div class="dir-tree-cont">
        <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
    </div>
    <input type="hidden" name="dst_repo" value="" />
    <input type="hidden" name="dst_path" value="" />
    <p class="error hide"></p>
    <input type="button" value="{% trans "Submit" %}" class="submit" />
    <button class="simplemodal-close">{% trans "Cancel"%}</button>
</form>
{% endif %}

<div id="group-repo-tabs" class="tab-tabs hide">
    <div class="hd ovhd">
        <h3 class="fleft">{% trans "Libraries" %}</h3>
        {% if user.permissions.can_add_repo %}
        <button class="repo-create fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "New Library" %}</span></button>
        {% endif %}
    </div>

    <div id="grp-repos">
        <table style="display:none">
            <thead></thead>
            <tbody></tbody>
        </table>

        <div class="empty-tips" style="margin-bottom:150px; display:none;">
            <h2 class="alc">{% trans "No library is shared to this group" %}</h2>
            <p>{% blocktrans %}You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.{% endblocktrans %}</p>
            <p>{% trans "Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded." %}</p>
        </div>
    </div>

    <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
    <p class="error error-tip hide"></p>
</div>

<div id="organization-repos" class="tab-tabs hide">
    <div class="hd">
        <h3 class="fleft">{% trans "Libraries" %}</h3>
        <button id="add-pub-lib" class="fright"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "Add Library"%}</span></button>
        <ul id="add-pub-lib-menu" class="hide">
            <li class="item share-existing">{% trans "Share existing libraries" %}</li>
            <li class="item create-new">{% trans "Create a new library" %}</li>
        </ul>
    </div>

    <table class="repo-list hide">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "No public library" %}</h2>
        <p>{% blocktrans %}You can create a public library by clicking "New Library" button, others can view and download this library.{% endblocktrans %}</p>
    </div>
    <img class="loading-tip" width="32" src="{{MEDIA_URL}}img/loading-new.gif" alt="{% trans 'Loading...' %}" />
    <p class="error error-tip hide"></p>
</div>

{% include "js/dir-view.html" %}

{% endblock %}

{% block extra_script %}
{% include "js/lib-op-popups.html" %}
<script type="text/javascript">
app["pageOptions"] = {
    site_root: "{{ SITE_ROOT }}",
    base_url: "{{ SITE_ROOT }}" + "home/my/",
    csrfToken: "{{ csrf_token }}",
    reposUrl: "{% url 'api2-repos' %}",
    pubReposUrl: "{% url 'api2-pub-repos' %}",
    groups: (function () {
        var groups = [];
        {% for group in request.user.joined_groups %}
        groups.push({'name': '{{group.group_name}}', 'id': '{{group.id}}'});
        {% endfor %}
        return groups;
    })(),
    top_nav_groups: (function () {
        var groups = [];
        {% for group in grps %}
        groups.push({
            'name': '{{group.group_name}}',
            'id': '{{group.id}}',
            'avatar': '{% grp_avatar group.id 36 %}'
        });
        {% endfor %}
        return groups;
    })(),
    user_mods_available: (function () {
        var mods_available = [];
        {% for mod in request.user.mods_available %}
        mods_available.push('{{mod}}');
        {% endfor %}
        return mods_available;
    })(),
    user_mods_enabled: (function () {
        var mods_enabled = [];
        {% for mod in request.user.mods_enabled %}
        mods_enabled.push('{{mod}}');
        {% endfor %}
        return mods_enabled;
    })(),
    username: "{{request.user.username}}",
    events_enabled: {% if events_enabled %} true {% else %} false {% endif %},
    can_add_repo: {% if user.permissions.can_add_repo %} true {% else %} false {% endif %},
    can_generate_shared_link: {% if user.permissions.can_generate_shared_link %} true {% else %} false {% endif %},
    is_staff: {% if request.user.is_staff %} true {% else %} false {% endif %},
    repo_password_min_length: {{ repo_password_min_length }},
    guide_enabled: {% if guide_enabled %} true {% else %} false {% endif %},
    enable_upload_folder: {% if enable_upload_folder %} true {% else %} false {% endif %},
    max_upload_file_size: {% if max_upload_file_size %} {{ max_upload_file_size }} {% else %} '' {% endif %},
    folder_perm_enabled: {% if folder_perm_enabled %} true {% else %} false {% endif %},
    is_pro: {% if is_pro %} true {% else %} false {% endif %},
    cur_note: {% if request.cur_note %} {'id': '{{ request.cur_note.id }}'} {% else %} null {% endif %}
};
</script>
{% if debug %}
<script data-main="{% static "scripts/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
{% else %}
<script data-main="{% static "scripts/dist/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
{% endif %}
{% endblock %}
